<!-- 搜索 -->
<template>
	<view class="whole">
		<!-- 搜索 -->
		<view class="head">
			<view class="head_box flex align-center">
				<i class="icon iconfont icon-sousuo" style="margin-left: 40rpx;margin-right: 10rpx;"></i>
				<input type="text" class="title" @input="toSearch" v-model="keywords"  />
				<!-- :placeholder='placeText' -->
			</view> 
		</view>
	<block v-if="list.length==0">
		<view class="history" >
			<!-- 历史记录 -->
			<view class="music_tj flex justify-between align-center"><view class="title">历史记录</view></view>
			<!-- 历史记录列表 -->
			<view class="hot_search flex">
				<view class="hot_search_item" v-for="(im,ix) in histroylist" :key='ix'>{{im}}</view>
			</view>
			<view class="icon iconfont icon-shanchu detele" @click="deleta">
				
			</view>
		</view>
		<view class="box" >
			<!-- 热门搜索 -->
			<view class="music_tj flex justify-between align-center"><view class="title">热门搜索</view></view>
			<!-- 热们搜索列表 -->
			<view class="hot_search flex">
				<view class="hot_search_item" v-for="(im,ix) in hotSearch" :key='ix'>{{im.searchWord}}</view>
			</view>
		</view>
	</block>
		<!-- 歌曲列表 -->
	<block v-show="list != []">
	<!-- {{list.length>0}} -->
		<view class="music_list" >
			<view class="music_item flex align-center" v-for="(im, ix) in list" :key="ix" @click="jumpMusicDetail(im.id)">
				<view class="music_item_pic">
					<image :src="im.album.artist.img1v1Url" class="pic" mode=""></image></view>
				<view class="music_item_txt flex column justify-around">
					<view class="title">{{im.name}}</view>
					<view class="desc">{{im.artists[0].name}}</view>
				</view>
				<view class="icon iconfont icon-jiantou"></view>
			</view>
		</view>
	</block>
		
	</view>
</template>

<script>
	import api from '../../utils/http/api.js'
export default {
	data() {
		return {
			keywords:'' ,//关键字
			// placeText:'' ,//默认关键字
			hotSearch:[], //热词
			list:[],//列表
			histroylist:[] ,//历史列表
			isSend:false //简单节流
		};
	},
	onLoad() {
		this.searchDefault()
		
	},
	onShow() {
		this.histroylist=uni.getStorageSync('historyList')?uni.getStorageSync('historyList'):[],
		console.log(uni.getStorageSync('historyList'),852)
	},
	methods:{
	 async searchDefault(){
		 // 默认
			// const res = await api ('/search/default')
			// 热门搜索
			const resHot = await api ('/search/hot/detail')
			// this.placeText = res.data.showKeyword
			this.hotSearch = resHot.data.slice(0,10) 
		},
		// 关键字搜索
		 toSearch(){
		
				if(this.isSend){
					return
				}
	
					this.timer= setTimeout(async()=>{
							this.isSend = true
							if(this.keywords.trim().length>0){
								const res = await api ('/search',{keywords:this.keywords,limit:8})
								this.list = res.result.songs
								// 存入数组之前判断有就删掉
								const ix=this.histroylist.indexOf(this.keywords)!==-1
									if(ix){
										this.histroylist.splice(ix,1)
									}
								// 没有或者删掉以后就将搜索项添加存入数组
								
								this.histroylist.unshift(this.keywords) 
								// 将历史记录存入缓存
								uni.setStorageSync('historyList',this.histroylist)
							}else{
								this.list=[]
							}
							this.isSend=false

					 },600)
		},
		// 清空历史记录
		deleta(){
			this.histroylist=[]
			uni.removeStorageSync('historyList'); //移出缓存中历史记录
		},
		// 跳转音乐详情
		jumpMusicDetail(id) {
			uni.navigateTo({
				url: '../musicDetail/musicDetail?id='+id
			});
		},
	}
};
</script>

<style lang="less" scoped>
.whole {
	// 搜索框
	.head {
		width: 100%;
		height: 100%;
		padding: 20rpx 30rpx;
		.head_box {
			background: #ffffff;
			border-radius: 20rpx;
			height: 60rpx;
			.title {
				font-size: 20rpx;
				width: 100%;
			}
		}
	}
	// 历史记录
	.history{
		padding: 0 30rpx;
		position: relative;
		.music_tj {
			margin: 20rpx 0;
			.title {
				font-size: 40rpx;
				font-weight: 800;
			}
			.more {
				font-size: 30rpx;
			}
		}
		// 热门搜索列表
		.hot_search {
			display: flex;
			flex-wrap: wrap;
			.hot_search_item {
				margin-right: 20rpx;
				margin-bottom: 20rpx;
				font-size: 26rpx;
				padding: 10rpx 20rpx;
				background: #ffffff;
				border-radius: 20rpx;
			}
		}
		.detele{
			position: absolute;
			right: 39rpx;
			bottom:32rpx;
		}
	}
	.box {
		padding: 0 30rpx;
		// 热门搜索
		.music_tj {
			margin: 20rpx 0;
			.title {
				font-size: 40rpx;
				font-weight: 800;
			}
			.more {
				font-size: 30rpx;
			}
		}
		// 热门搜索列表
		.hot_search {
			display: flex;
			flex-wrap: wrap;
			.hot_search_item {
				margin-right: 20rpx;
				margin-bottom: 20rpx;
				font-size: 26rpx;
				padding: 10rpx 20rpx;
				background: #ffffff;
				border-radius: 20rpx;
			}
		}
	}
	//歌曲列表
.music_list {
	margin-top: 30rpx;
	.music_item {
		margin-bottom: 20rpx;
		.music_item_pic {
			width: 100rpx;
			height: 100rpx;
		}
		.music_item_txt {
			width: 550rpx;
			padding: 0 20rpx;
			.title {
				font-size: 34rpx;
			}
			.desc {
				font-size: 24rpx;
			}
		}
	}
}
}
</style>
